<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轻松玩转CSS3 动画 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            position: relative;
        }

        .elf {
            width: 200px;
            height: 300px;
            background-image: url("images/2.png");
            background-position: calc(200px * 3);
            position: absolute;
            left: calc(50% - 250px);
            bottom: 150px;
            animation: elf 1s steps(1) infinite;
            transform: translateX(150px) scaleX(-1);
        }

        @keyframes elf {
            0% {
                background-position: calc(-200px * 0);
            }
            12.5% {
                background-position: calc(-200px * 1);
            }
            25% {
                background-position: calc(-200px * 2);
            }
            37.5% {
                background-position: calc(-200px * 3);
            }
            50% {
                background-position: calc(-200px * 4);
            }
            65.5% {
                background-position: calc(-200px * 5);
            }
            75% {
                background-position: calc(-200px * 6);
            }
            87.5% {
                background-position: calc(-200px * 7);
            }
            100% {
                background-position: calc(-200px * 8);
            }
        }

        body {
            background-image: url("images/back.png");
            background-size: auto 100%;
            animation:back 30s steps(2000) infinite;
        }

        @keyframes back {
            0% {
                background-position: 0;
            }
            100% {
                background-position: -100%;
            }
        }


    </style>

</head>
<body>
<div class="elf"><!-- 精灵图片显示位置--></div>
<audio src="1.mp3" autoplay loop="true"></audio>
</body>
</html>